<template>
    <div class="bg">
        <XHeader
            :left-options="{backText:''}"
            style="background-color: #55BEC1;"
            class="tabbar"
        >
        <div style="display:inline-block;margin:0;position:relative;width:100%">
            <input type="text" v-on:keyup.13="sou" @input="shuru" v-model.trim="search" placeholder="请输入搜索关键字" @blur="searchResult=''">
            <span class="fa fa-search icon"></span>
        </div>
           <span sort="right" @touchstart="sou" style="position:absolute;right:20px">搜 索</span>
        </XHeader>
        <p style="margin:47px 0 0 0"></p>

        <div class="sousuo">
            <p v-for="s in searchResult">
                <router-link :to="'/novel/'+s._id" style="color:#a21">
                    {{s.name}}
                </router-link>
            </p>
        </div>

        <div v-if="showHot" style="background-color:white;text-align:left">
            <p style="border-bottom:solid 1px #ddd;padding:15px 20px;font-size:25px;margin:0;">热搜榜</p>
            <div style="padding-left:20px;font-size:18px">
                <div style="display:flex;height:50px" v-for="(h,i) in hot">
                    <router-link :to="'/novel/'+h._id" style="display:flex;width:100%;color:#666666">
                        <span class="afte" :class="{one:i==0,two:i==1,three:i==2}">{{i}}</span>
                        <p class="text">{{h.name}}</p>
                    </router-link>
                </div>
            </div>
        </div>
        <p v-show="!showHot" style="text-align:left;margin:0 10px;padding:12px 0;font-size:19px">共 <span style="color:#F46253">{{this.bookslegth}}</span> 个结果</p>
        <div class="novel" v-for="(b,i) in books" :key="i">
            <router-link :to="'/novel/'+b._id" style="display:flex">
                <div><img :src="'/api/images/books/'+b.avatar"></div>
                <div>
                    <p class="novel-title">{{b.name}}</p>
                    <span>{{b.category}} |</span><span>{{b.state}}</span><br>
                    <span class="novel-text">{{b.introduction}}</span>
                </div>
            </router-link>
        </div>

        <div style="height:60px;background-color:#55BEC1;line-height:60px;font-size:15px">
            <span style="color:white">联系在线客服请关注公众号：</span>
            <span style="color:red">书海小说网</span>
        </div>
    </div>
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        components:{
            XHeader
        },
        data:function(){
            return {
                search:null,
                showHot:true,
                hot:[],
                books:[],
                bookslegth:null,
                searchResult:[],
                time:null,
            }
        },
        watch:{
            search:function(vh,oh){
                if(vh==""){
                    this.searchResult = [];
                }
            }
        },
        mounted:function(){
            this.http.get("/api/hot",{params:{num:6}}).then(res=>{
                this.hot = res.data.data;
            })
        },
        methods:{
            sou:function(){
                this.searchResult = [];
                this.http.get("/api/sou",{params:{search:this.search}}).then(res=>{
                    this.books = res.data.data;
                    this.bookslegth = res.data.data.length;
                    this.showHot =false;
                })
            },
            shuru:function(){
                if(this.time){
                    clearTimeout(this.time);
                    this.time = null;
                }
                var time =setTimeout(function(){
                    this.searchResult = [];
                    if(this.search){
                        this.http.get("/api/sou",{params:{search:this.search}}).then(res=>{
                            this.searchResult = res.data.data;
                        })
                    }
                }.bind(this),600)
            }
        }
    }
</script>

<style scoped>
    .tabbar{
        position: fixed;
        top: 0;
        width: 100%;
    }
    .tabbar input{
        width: 100%;
        height: 36px;
        border-radius: 5px;
        border: none;
        padding-left: 38px;
    }
    .icon{
        position:absolute;
        left:10px;
        color: #999;
        font-size: 25px;
        top:8px;
    }
    .afte{
        display: inline-block;
        width: 25px;
        height: 25px;
        margin-top: 12px;
        line-height: 25px;
        color: white;
        text-align: center;
        margin-right: 10px;
        background-color: #B7C2C5;
    }
    .one{
        background-color: #F46253;
    }
    .two{
        background-color: #FF8059;
    }
    .three{
        background-color: #FBAC34;
    }
    .text{
        margin: 0;
        border-bottom: solid 1px #ddd;
        line-height: 50px;
        width: 100%;
    }
    .novel{
        display: flex;
        padding:16px;
        background-color: white;
        border-bottom: solid 1px #ddd;
        text-align: left;
    }
    .novel img{
        width: 80px;
        height: 110px;
        margin-right: 10px;
    }
    .novel-title{
        margin:10px 0;
        color: black;
    }
    .novel span{
        font-size: 14px;
        color: #777;
    }
    .novel-text{
        display: inline-block;
        margin-top: 10px;
        height: 17px;
        width: calc(100vw - 120px);
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sousuo{
        position: absolute;
        color: black;
        width: 50%;
        left: 25%;
        background-color: white;
        border-radius: 6px;
        text-align:left;
        padding-left: 10px;
    }
    .sousuo p{
        margin: 5px 0;
        padding: 8px 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        font-size: 14px;
        color: #666666;
        border-bottom: solid 1px #dddddd;
    }
</style>